<template>
  <view class="nucleiv">
    <view class="top">
      <view class="top-t">
        <view class="left">
          <image :src="OrderList?.logo"></image>
        </view>
        <view class="right">
          <text class="title">{{ OrderList?.name }}</text>
          <p class="p">￥{{ OrderList?.price }}</p>
        </view>
      </view>
      <view class="bottom">
        <view
          class="item"
          v-for="(item, index) in OrderList?.boon"
          :key="index"
        >
          <image src="../../static/对钩-圆.png" mode="widthFix"></image>
          <text class="name">{{ item }}</text>
        </view>
      </view>
    </view>
    <view class="middle">
      <view class="m-l">
        <text class="m-l-t">{{ OrderList?.hospital }}</text>
        <text class="m-l-b">{{ OrderList?.address }}</text>
      </view>
      <view class="m-r" @click="callPhone">
        <image src="../../static/电话.png" mode="widthFix"></image>
        <p class="phone">电话</p>
      </view>
    </view>
    <view class="form">
      <!-- 真实姓名 -->
      <view class="name">
        <text>真实姓名</text>
        <input
          type="text"
          v-model="NucForm.name"
          placeholder="请输入真实姓名"
        />
      </view>
      <!-- 手机号 -->
      <view class="name">
        <text>手机号</text>
        <input
          type="number"
          v-model="NucForm.phone"
          placeholder="请输入手机号"
        />
      </view>

      <!-- 身份证 -->
      <view class="name">
        <text>身份证</text>
        <input
          type="number"
          v-model="NucForm.id_card"
          placeholder="请输入身份证"
        />
      </view>
    </view>
    <view class="time">
      <text class="time-tt">选择预约时段</text>
      <scroll-view class="time-list" scroll-x="true">
        <view class="list">
          <view
            class="item"
            @click="tab(item.date)"
            :class="{ bg: data == item.date }"
            v-for="(item, index) in OrderList?.date"
            :key="index"
          >
            <text class="one">{{ item.date }}</text>
            <text class="two">{{ item.week }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="style">
      <text class="style-t">咽拭子采样方式</text>
      <view
        class="style-list"
        v-for="(item, index) in OrderList?.style"
        :key="index"
      >
        <view class="style-item">{{ item.title }}</view>
        <view class="desc" v-for="(o, i) in item.desc">{{ o }}</view>
      </view>
    </view>
    <view class="kong"></view>
    <view class="footer">
      <view class="price">合计：￥{{ OrderList?.price }}</view>
      <button @click="submit">提交</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { NcovT, NucFormT } from "../../types/type";
// 获取数据
const OrderList = ref<NcovT>();
const getList = async () => {
  const res: any = await api.nuataget();
  console.log(res);
  OrderList.value = res.data[0];
};
onMounted(() => {
  getList();
});
const NucForm = reactive<NucFormT>({
  id_card: "411726200311191971",
  name: "闫文兆",
  phone: "18349302948",
  time: "",
});
const data = ref<string>("");
const tab = (date: string) => {
  data.value = date;
  NucForm.time = date;
};
const submit = async () => {
  const res: any = await api.resnuata(NucForm);
  console.log(res);
  if (res.msg == "提交成功") {
    uni.navigateTo({
      url: "/navPage/nucList/nucList",
    });
  } else {
    uni.showToast({
      title: res.msg,
      icon: "none",
    });
  }
};
function callPhone() {
  uni.makePhoneCall({
    phoneNumber: "15516603618",
    success: (res) => {
      console.log(res);
    },
  });
}
</script>

<style lang="scss" scoped>
.nucleiv {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 200rpx;
    background-color: #fff;
    justify-content: space-between;
    .price {
      width: 250rpx;
      text-align: center;
      color: #f00;
      font-weight: 600;
    }
    button:last-child {
      background-color: #2c76ef;
      color: #fff;
      width: 250rpx;
    }
  }
  .top-t {
    display: flex;
    align-items: center;
  }
  .top {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    .left {
      margin-right: 10px;
      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
    .right {
      .title {
        font-size: 35rpx;
        display: block;
        margin-bottom: 10px;
      }
      .p {
        color: #f00;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      image {
        width: 30rpx;
      }
    }
  }
  .middle {
    margin: 20rpx 0;
    background-color: #fff;
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .m-l {
      line-height: 50rpx;
      .m-l-t,
      .m-l-b {
        display: block;
      }
    }
    .m-r {
      image {
        width: 60rpx;
      }
    }
  }
  .form {
    width: 100%;
    margin: 20rpx 0;
    background-color: #fff;
    padding: 0 10rpx;
    box-sizing: border-box;
    .name {
      display: flex;
      align-items: center;
      padding: 40rpx 10rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      input {
        flex: 1;
        text-align: right;
      }
    }
    .picker {
      flex: 1;
      text-align: right;
    }
    .name:last-child {
      border: 0;
    }
  }
  .time {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    .list {
      display: flex;
      align-items: center;
      width: 117%;
      overflow-x: scroll;
      .bg {
        background-color: #2c76ef !important;
        color: #fff;
      }
      .item {
        text-align: center;
        padding: 12rpx;
        border-radius: 10rpx;
        line-height: 50rpx;
        margin-right: 10rpx;
        box-sizing: border-box;
      }
    }
    .time-tt {
      font-weight: 600;
    }
  }
  .style {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .style-t {
      font-weight: 600;
    }
    .style-list {
      .style-item {
        padding: 10rpx;
        box-sizing: border-box;
        background-color: #2c76ef;
        color: #fff;
        border-radius: 10rpx;
        margin: 10rpx 0;
        width: 140rpx;
      }
    }

    .desc {
      line-height: 50rpx;
    }
  }
  .kong {
    width: 100%;
    height: 250rpx;
    background-color: #f5f5f5;
  }
}
</style>
